<template>
  <div class="container">
    <van-nav-bar title="我的订单"/>
    <van-sticky>
      <van-tabs v-model="active" animated>
        <van-tab :to="item.path" v-for="(item, index) in navtab" :key="index" :title="item.title">
        </van-tab>
      </van-tabs>
    </van-sticky>
    <div class="orders">
      <router-view></router-view>
    </div>
    <Tabbar/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
      navtab: [
        { title: '茶饮订单', path: '/order/tea' },
        { title: '百货订单', path: '/order/commodity' },
      ]
    }
  }
}
</script>

<style>
.van-tabs--line .van-tabs__wrap {
  height: 55px;
}

.van-tabs__line {
  bottom: 26px;
  border-radius: 0;
}

.van-tabs__line {
  background-color: #0151c6;
}
</style>